{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "1fe2a952-3b03-4cc7-8071-693984e3b11e",
   "metadata": {
    "tags": []
   },
   "source": [
    "Reports are comprised of multiple _Blocks_, which wrap up Python objects, such as Pandas DataFrames, visualisations, and Markdown. Datapane also includes interactive layout blocks to add tabs, pages, and selects to your reports.\n",
    "\n",
    "_Blocks_ can be combined together and nested. For instance, you can pass multiple plots into a `Select` to provide an interactive dropdown. This makes it simple to assemble complex, reusable interfaces and reports. \n",
    "\n",
    "!!! tip\n",
    "    You can think of blocks as similar to HTML Elements / Tags, but specialized on creating data-driven reports\n",
    "\n",
    "## Blocks\n",
    "\n",
    "There are two main types of Blocks provided by default in Datapane:\n",
    "\n",
    "1. [Display Blocks](./display-blocks.ipynb) display data and visualizations, such as a Plot (dp.Plot) or a DataTable (dp.DataTable). They take Python objects, such as Panda DataFrames, and automatically convert them into a component that can be viewed in your report. \n",
    "2. [Layout Blocks](./layout-blocks.ipynb) can be used to layout other Blocks. For instance, `dp.Group` can group blocks together in columns, or `dp.Select` allows a user to select between multiple blocks. They take other Blocks as their input and lay them out to help build complex and visually informative layouts.\n",
    "\n",
    "## Example\n",
    "\n",
    "Below is a simple example that demonstrates building up a collection of blocks, including BigNumber to display high-level data, a Plot block, and multiple tabs and columns. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a40acc83",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import libraries\n",
    "import datapane as dp\n",
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "\n",
    "# Load the data from vega_datasets\n",
    "source = data.cars()\n",
    "\n",
    "# Create an interactive Altair chart\n",
    "plot1 = (\n",
    "    alt.Chart(source)\n",
    "    .mark_circle(size=60)\n",
    "    .encode(\n",
    "        x=\"Horsepower\",\n",
    "        y=\"Miles_per_Gallon\",\n",
    "        color=\"Origin\",\n",
    "        tooltip=[\"Name\", \"Origin\", \"Horsepower\", \"Miles_per_Gallon\"],\n",
    "    )\n",
    "    .interactive()\n",
    ")\n",
    "\n",
    "report = dp.Blocks(\n",
    "    dp.Page(\n",
    "        title=\"Plots\",\n",
    "        blocks=[\n",
    "            dp.Formula(\"x^2 + y^2 = z^2\"),\n",
    "            dp.Group(\n",
    "                dp.BigNumber(heading=\"Number of percentage points\", value=\"84%\", change=\"2%\", is_upward_change=True),\n",
    "                dp.BigNumber(heading=\"Simple Statistic\", value=100),\n",
    "                columns=2,\n",
    "            ),\n",
    "            dp.Select(\n",
    "                dp.Plot(plot1, label=\"Chart\"),\n",
    "                dp.HTML(\n",
    "                    \"\"\"\n",
    "                    <iframe src=\"https://giphy.com/embed/7NoNw4pMNTvgc\" width=\"480\" height=\"480\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen></iframe><p><a href=\"https://giphy.com/gifs/content-7NoNw4pMNTvgc\">via GIPHY</a></p>\n",
    "                    \"\"\",\n",
    "                    label=\"HTML + GIF\",\n",
    "                ),\n",
    "            ),\n",
    "        ],\n",
    "    ),\n",
    "    dp.Page(title=\"Data\", blocks=[dp.DataTable(source, label=\"Data\")]),\n",
    ")\n",
    "\n",
    "dp.save_report(report, path='report.html')"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
